<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				position: relative;
				width: 200px;
				height: 200px;
				background-color: pink;
				left: -200px;
			}
			span{
				position: absolute;
				width: 40px;
				height: 40px;
				background-color: skyblue;
				right: -40px;
				top: 50%;
				margin-top: -20px;
				text-align: center;
				line-height: 40px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<span id="">
				出
			</span>
		</div>
	</body>
	<script type="text/javascript">
		// 缓速动画公式：  加速度 = （结束值 - 起始值）/ 缓速运动  ----->得到一个数。这个数由小到大到小。
		window.onload = function(){
			var box = document.getElementById('box')
			var timer1 = null,end = 0,end1 = -200;
			box.onmouseover = function(){
				clearInterval(timer1)
				timer1 = setInterval(function(){
					speed = Math.ceil((end - box.offsetLeft) /30 );
					if(box.offsetLeft == end){
						clearInterval(timer1)
						return;
					}else{
						box.style.left = box.offsetLeft + speed + 'px'
					}
				},30)
			}
			box.onmouseout = function(){
				clearInterval(timer1)
				timer1 = setInterval(function(){
					speed = Math.floor((end1 - box.offsetLeft) / 30 );
					if(box.offsetLeft == end1){
						clearInterval(timer1)
						return;
					}else{
						box.style.left = box.offsetLeft + speed + 'px'
					}
				},30)
			}
			
			// 封装函数
			function slowAnimation(obj,end){
				clearInterval(timer1)
				timer1 = setInterval(function(){
					speed = end - obj.offsetLeft) / 30;
					speed = speed>0 ? Math.ceil(speed) : Math.floor(speed)
					if(obj.offsetLeft == end){
						clearInterval(timer1)
						return;
					}else{
						obj.style.left = obj.offsetLeft + speed + 'px'
					}
				},30)
			}
			
			
			
			
			
			}
	</script>
</html>
